<!--
 * @Author: zhoulei0232
 * @Date: 2021-06-18 11:22:59
 * @LastEditTime: 2021-07-27 16:53:07
 * @LastEditors: zhoulei0232
 * @Description: 
-->
<template>
  <div class="tmp-box">
    <el-card class="box-card card_top1">
      <el-form :model="form" :inline="true" size="small">
        <el-row>
          <el-form-item label="姓名">
            <el-input
              v-model="form.name"
              placeholder="请输入姓名"
              label="left"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="用户归属部门">
            <el-input
              v-model="form.email"
              placeholder="请输入用户归属部门"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="登陆账户名">
            <el-input
              v-model="form.autograph"
              placeholder="请输入登陆账户名"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="职务">
            <el-select
              v-model="form.occupation"
              placeholder="请选择职务"
              clearable
              class="w100"
            >
              <el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
              <el-option label="生产 / 工艺 / 制造" value="2"></el-option>
              <el-option label="医疗 / 护理 / 制药" value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="手机">
            <el-input
              v-model="form.phone"
              placeholder="请输入手机"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="性别">
            <el-select
              v-model="form.sex"
              placeholder="请选择性别"
              clearable
              class="w100"
            >
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="35">
          <el-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="24"
            class="zl-form-btn-r"
          >
            <el-form-item>
              <el-button type="primary" icon="iconfont icon-biaodan"
                >搜索</el-button
              >
              <el-button type="primary" icon="iconfont icon-biaodan"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card card_top2">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="150">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="province" label="省份" width="120">
        </el-table-column>
        <el-table-column prop="city" label="市区" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";

export default {
  name: "table",
  setup() {
    const state = reactive({
      form: {}, //表单
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    });
    const handleClick = (row) => {
      console.log(row);
    };
    return {
      ...toRefs(state),
      handleClick,
    };
  },
};
</script>

<style  scoped lang="scss">
.card_top1 {
  margin-bottom: 16px;
}
.card_top2 {
  flex-grow: 1;
}
.zl-form-btn-r {
  text-align: right;
}
</style>